<!-- 微信小程序相机页面 -->
<template>
  <view class="camera-container">
    <!-- 相机组件 -->
    <camera class="camera" device-position="back" flash="auto" @error="handleCameraError" :style="{ width: '100%', height: '100%' }"></camera>
    
    <!-- 相机控制区域 -->
    <view class="controls">
      <!-- 状态文本 -->
      <view class="status-text">{{ statusText }}</view>
      
      <!-- 底部控制栏 -->
      <view class="control-bar">
        <view class="back-btn" @tap="closeCamera">
          <text class="icon">×</text>
        </view>
        
        <view class="capture-btn" @tap="captureImage">
          <view class="capture-btn-inner"></view>
        </view>
        
        <view class="switch-btn" @tap="switchCamera">
          <text class="icon">⟲</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cameraContext: null,
      cameraReady: false,
      devicePosition: 'back',
      statusText: '正在初始化相机...',
      captureInProgress: false
    }
  },
  
  onLoad() {
    // 页面加载时初始化相机
    this.initCamera();
  },
  
  onReady() {
    console.log('相机页面已就绪');
    // 延迟一会儿再初始化相机，避免某些设备上的问题
    setTimeout(() => {
      if (!this.cameraReady) {
        this.initCamera();
      }
    }, 300);
  },
  
  methods: {
    // 初始化相机
    initCamera() {
      console.log('初始化相机');
      try {
        // 优先使用uni API
        this.cameraContext = uni.createCameraContext();
        
        // 微信环境下特别处理
        // #ifdef MP-WEIXIN
        if (!this.cameraContext) {
          console.log('尝试使用wx API创建相机上下文');
          this.cameraContext = wx.createCameraContext();
        }
        // #endif
        
        if (this.cameraContext) {
          console.log('相机上下文创建成功');
          this.cameraReady = true;
          this.statusText = '相机已就绪，点击拍照按钮进行拍摄';
        } else {
          console.error('相机上下文创建失败');
          this.statusText = '相机初始化失败，请返回重试';
        }
      } catch (error) {
        console.error('初始化相机出错:', error);
        this.statusText = '相机初始化出错，请返回重试';
      }
    },
    
    // 处理相机错误
    handleCameraError(error) {
      console.error('相机错误:', error);
      this.statusText = '相机出现错误: ' + (error.detail ? error.detail.errMsg : '未知错误');
      
      // 显示错误提示
      uni.showToast({
        title: '相机出现错误，请检查权限或重试',
        icon: 'none',
        duration: 2000
      });
    },
    
    // 切换前后相机
    switchCamera() {
      this.devicePosition = this.devicePosition === 'back' ? 'front' : 'back';
      this.statusText = `已切换到${this.devicePosition === 'back' ? '后置' : '前置'}相机`;
    },
    
    // 捕获图像
    captureImage() {
      if (this.captureInProgress) {
        console.log('拍照操作正在进行中，请稍候');
        return;
      }
      
      if (!this.cameraReady || !this.cameraContext) {
        console.error('相机未就绪，无法拍照');
        this.statusText = '相机未就绪，请返回重试';
        return;
      }
      
      // 显示加载中
      uni.showLoading({
        title: '拍照中...'
      });
      
      this.captureInProgress = true;
      this.statusText = '正在拍照...';
      
      try {
        console.log('开始拍照');
        
        // #ifdef MP-WEIXIN
        // 在微信小程序环境中使用wx API
        let cameraContext;
        try {
          cameraContext = wx.createCameraContext();
        } catch (e) {
          console.error('获取微信相机上下文失败', e);
          cameraContext = this.cameraContext;
        }
        
        cameraContext.takePhoto({
          quality: 'high',
          success: (res) => {
            console.log('微信原生相机拍照成功:', res);
            wx.showToast({
              title: '拍照成功',
              icon: 'success'
            });
            
            if (res.tempImagePath) {
              // 直接将图片路径传到页面并返回
              const pages = getCurrentPages();
              const prevPage = pages[pages.length - 2];
              
              // 方法1: 设置上一页面的数据
              if (prevPage) {
                try {
                  prevPage.cameraResult = { tempImagePath: res.tempImagePath };
                  prevPage.setData({
                    cameraResult: { tempImagePath: res.tempImagePath }
                  });
                  console.log('已将照片路径设置到上一页面');
                } catch (err) {
                  console.error('设置上一页面数据失败:', err);
                }
              }
              
              // 方法2: 通过全局变量
              try {
                const app = getApp();
                if (app) {
                  app.globalData = app.globalData || {};
                  app.globalData.cameraResult = { tempImagePath: res.tempImagePath };
                  console.log('已将照片路径保存到全局变量');
                }
              } catch (err) {
                console.error('保存全局变量失败:', err);
              }
              
              // 方法3: 通过事件
              uni.$emit('cameraResult', { tempImagePath: res.tempImagePath });
              
              // 延迟返回
              setTimeout(() => {
                this.closeCamera({ tempImagePath: res.tempImagePath });
              }, 500);
            } else {
              uni.hideLoading();
              this.captureInProgress = false;
              this.statusText = '拍照失败，未获取到图片';
              
              uni.showToast({
                title: '拍照失败，未返回图片路径',
                icon: 'none'
              });
            }
          },
          fail: (error) => {
            console.error('微信原生相机拍照失败:', error);
            uni.hideLoading();
            this.captureInProgress = false;
            this.statusText = '拍照失败，请重试';
            
            uni.showToast({
              title: '拍照失败: ' + (error.errMsg || '未知错误'),
              icon: 'none'
            });
          },
          complete: () => {
            uni.hideLoading();
          }
        });
        // #endif
        
        // #ifndef MP-WEIXIN
        // 非微信小程序环境，使用uni API
        this.cameraContext.takePhoto({
          quality: 'high',
          success: (res) => {
            console.log('uni相机拍照成功:', res);
            
            if (res.tempImagePath) {
              this.statusText = '拍照成功，正在返回...';
              
              // 保存图片路径并返回
              const result = {
                tempImagePath: res.tempImagePath
              };
              
              // 尝试通过多种方法传递结果
              try {
                // 方法1: 通过全局事件
                uni.$emit('cameraResult', result);
                console.log('通过全局事件发送结果');
              } catch (err) {
                console.error('通过全局事件发送结果失败:', err);
              }
              
              try {
                // 方法2: 通过全局变量
                const app = getApp();
                if (app && app.globalData) {
                  app.globalData.cameraResult = result;
                  console.log('已将结果保存到全局变量');
                }
              } catch (err) {
                console.error('保存结果到全局变量失败:', err);
              }
              
              // 关闭相机页面，返回上一页
              setTimeout(() => {
                this.closeCamera(result);
              }, 500);
            } else {
              uni.hideLoading();
              this.captureInProgress = false;
              this.statusText = '拍照失败，未获取到图片';
              
              uni.showToast({
                title: '拍照失败，请重试',
                icon: 'none'
              });
            }
          },
          fail: (error) => {
            console.error('uni相机拍照失败:', error);
            uni.hideLoading();
            this.captureInProgress = false;
            this.statusText = '拍照失败，请重试';
            
            uni.showToast({
              title: '拍照失败: ' + (error.errMsg || '未知错误'),
              icon: 'none'
            });
          },
          complete: () => {
            uni.hideLoading();
          }
        });
        // #endif
      } catch (error) {
        console.error('调用拍照方法出错:', error);
        uni.hideLoading();
        this.captureInProgress = false;
        this.statusText = '拍照出错，请重试';
        
        uni.showToast({
          title: '拍照出错，请重试',
          icon: 'none'
        });
      }
    },
    
    // 关闭相机并返回
    closeCamera(result) {
      console.log('关闭相机页面', result ? '并携带结果' : '无结果');
      
      // 如果有结果，尝试再次发送
      if (result && result.tempImagePath) {
        try {
          uni.$emit('cameraResult', result);
        } catch (err) {
          console.error('关闭时发送结果失败:', err);
        }
      }
      
      // 尝试返回上一页
      try {
        uni.navigateBack({
          delta: 1,
          fail: (err) => {
            console.error('返回上一页失败:', err);
            
            // 如果返回失败，尝试重定向到上一页
            setTimeout(() => {
              uni.redirectTo({
                url: '/pages/design/decoration',
                fail: (redirectErr) => {
                  console.error('重定向到上一页也失败:', redirectErr);
                }
              });
            }, 200);
          }
        });
      } catch (error) {
        console.error('关闭相机页面出错:', error);
      }
    }
  }
}
</script>

<style>
.camera-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background-color: #000;
}

.controls {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.status-text {
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 28rpx;
  padding: 20rpx;
  background-color: rgba(0, 0, 0, 0.5);
  margin-bottom: 30rpx;
}

.control-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 30rpx 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.back-btn, .switch-btn {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon {
  color: #fff;
  font-size: 60rpx;
}

.capture-btn {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
}

.capture-btn-inner {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background-color: #fff;
}
</style> 